<template>
  <d2-container>
    <template slot="header">期权成交管理-新增</template>
    <el-card shadow="never" class="d2-mb titleline">
     <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
         <p class="title_l fl">成交明细</p>
     </template>
      <!-- <el-card shadow="never" class="d2-mb"> -->
        <div class="tl mb10">
          <el-button type="default" size="small" @click="addRow">
          <d2-icon name="plus" />
          增行
        </el-button>
        <el-button type="default" size="small" icon="el-icon-delete" @click="delData">
          删行
        </el-button>
        </div>
       <el-table :data="tableData" ref="table" tooltip-effect="dark" border stripe style="width: 100%" @selection-change='selectRow'>
              <el-table-column type="selection" width="45" align="center"></el-table-column>
              <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
              <el-table-column  label="客户号" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column  label="日期" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column  label="客户名称" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column label="期货公司名称">
                <template slot-scope="scope">
                  <el-input class="require_des" v-model="scope.row.require_des"></el-input>
                </template>
              </el-table-column>
               <el-table-column  label="成交序号" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column  label="成交日期" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column  label="交易所" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
              <el-table-column label="品名">
                <template slot-scope="scope">
                  <el-input class="require_des" v-model="scope.row.require_des"></el-input>
                </template>
              </el-table-column>
               <el-table-column  label="合约" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
              <el-table-column label="方向">
                <template slot-scope="scope">
                  <el-input class="require_des" v-model="scope.row.require_des"></el-input>
                </template>
              </el-table-column>
               <el-table-column  label="开平" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column  label="投保" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column  label="成交价" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
              <el-table-column label="手数">
                <template slot-scope="scope">
                  <el-input class="require_des" v-model="scope.row.require_des"></el-input>
                </template>
              </el-table-column>
               <el-table-column  label="成交额" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
               <el-table-column  label="手续费" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
              <el-table-column label="平仓盈亏">
                <template slot-scope="scope">
                  <el-input class="require_des" v-model="scope.row.require_des"></el-input>
                </template>
              </el-table-column>
               <el-table-column  label="权利金收支" align="center">
                <template slot-scope="scope">
                  <el-cascader prop="post_id" class="post_name" v-model="scope.row.post_id" :options="post_options" :show-all-levels="false" @change="test"></el-cascader>
                </template>
              </el-table-column>
        </el-table>
      <!-- </el-card> -->
      <el-dialog :visible.sync="getA" title="品名">
        <trade-name :rowaa="row"></trade-name>
      </el-dialog>
     
    </el-card>
    <el-button
      type="primary"
      size="small"
      style="float:right;margin-left: 10px;"
    >
      保存
    </el-button>
    <el-button
      type="default"
      size="small"
      @click="dialogVisible = true"
      style="float:right"
    >
      取消
    </el-button>
  </d2-container>
</template>

<script>
export default {
  //现货期货套期-新增/编辑
  name: "add_arbitrage",
//   components: {
//     "trade-name": tradeName
//   },
  data() {
    return {
        tableData: [],
        selectlistRow: [],
        rowNum:1,
      egForm: {},
      getA: false,
      row: "",
      rowHandle: {
        columnHeader: "品名*",
        custom: [
          {
            text: "品名",
            size: "small",
            emit: "edit"
          }
        ]
      },
      spotData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      options: {
        border: true
        //  defaultSort: {
        //   prop: 'date',
        //   order: 'descending'
        // }
      },
      options1: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: ""
    };
  },
  created() {
           this.tabledatas = [
               { title: '标题1', text: 's111sssa' },
               { title: '标题2', text: 'ss222ssa' },
           ]
           this.tabledatas.map(i => {
               i.show = false
               return i
           })
  },
  methods: {
    // 行内编辑
    handleCellDataChange({ rowIndex, key, value, row }) {
      debbuger;
      console.log(rowIndex);
      console.log(key);
      console.log(value);
      console.log(row);
    },

    // 单选
    handleCurrentChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
      console.log(oldCurrentRow);
    },
    // 多选
    handleSelectionChange(selection) {
      console.log(selection);
    },
    // 清空当前页缓存并刷新此页面
    async handleCleanCacheAndRefreshCurrent() {
      this.keepAliveRemove(this.$route.name);
      await this.$nextTick();
      this.$router.replace("/refresh");
    },
    //品名弹框
    getMore(row) {
      this.getA = true;
      this.row = row;
    },
     // 获取表格选中时的数据
      selectRow (val) {
        this.selectlistRow = val
      },
      // 增加行
      addRow () {
       	  var list = {
          rowNum:this.rowNum,
          post_id:[],
          require_des: '',
          text:''
   		 };
        this.tableData.unshift(list)
        this.rowNum += 1;
      },
      // 删除方法
      // 删除选中行
      delData () {
        for (let i = 0; i < this.selectlistRow.length; i++) {
          let val = this.selectlistRow
          val.forEach((val, index) => {
            this.tableData.forEach((v, i) => {
              if (val.rowNum === v.rowNum) {
                // i 为选中的索引
                this.tableData.splice(i, 1)
              }
            })
          })
        }
        // 删除完数据之后清除勾选框
        this.$refs.table.clearSelection()
      },
  }
};
</script>
